<template>
  <div class="bgBox">
    <div class="topBox">
      <div class="itemBox" v-for="(item, i) in goodList" :key="i">
        <div class="goodBox">
          <div class="imgBox">
            <img
              :src="
                fileUrlObj[item.goodsMainFileCode] ||
                (loading ? 'loading.gif' : 'noImgData.png')
              "
            />
          </div>
          <div class="delbox">
            <p>{{ item.goodsName }}</p>
            <p class="attr">{{ item.attrNames }}</p>
          </div>
        </div>

        <van-form ref="form">
          <van-field
            name="rate"
            label="描述相符"
            required
            :rules="[
              {
                type: 'number',
                trigger: 'onChange',
                message: '请选择描述相符评分',
              },
            ]"
          >
            <template #input>
              <van-rate v-model="item.formData.descMatchRating" />
            </template>
          </van-field>
          <van-field
            v-model="item.formData.commentContent"
            rows="5"
            name="评价内容"
            label="评价内容"
            type="textarea"
            maxlength="512"
            placeholder="请输入评价内容"
            show-word-limit
            :rules="[
              {
                pattern: $commonReg.textAreaReg,
                message: $commonReg.textAreaMsg,
                trigger: 'onBlur',
              },
            ]"
          />
          <van-field name="uploader" label="评价附件">
            <template #input>
              <uploadCom
                ref="uploadRef"
                :maxNumber="6"
                @click.native="goodclick($event.target, i)"
                @uploadFileIds="uploadFileIds"
                accept=".jpg,.jpeg,.png,.mp4"
              ></uploadCom>
            </template>
          </van-field>
        </van-form>
      </div>
    </div>
    <div>
      <h5>
        店铺评分：<span> {{ networkName }}</span>
      </h5>
      <van-form ref="formData">
        <van-field
          name="rate"
          label="服务态度"
          required
          :rules="rules.serviceRating"
        >
          <template #input>
            <van-rate v-model="formData.serviceRating" />
          </template>
        </van-field>
        <van-field
          name="rate"
          label="物流服务"
          required
          :rules="rules.logisticsRating"
        >
          <template #input>
            <van-rate v-model="formData.logisticsRating" />
          </template>
        </van-field>
      </van-form>
      <van-button class="defaultBtn" @click="handleSave">保存</van-button>
    </div>
    <full-loading v-if="loading"></full-loading>
  </div>
</template>

<script>
import { queryFileList } from "@/api/common";
import { commentSave } from "@/api/srvAssurance/shoppingMall/appraise";
import { orderGet } from "@/api/srvAssurance/shoppingMall/order";
export default {
  data() {
    return {
      username: "",
      formData: {
        networkId: "",
        orderNo: "",
        logisticsRating: 1,
        serviceRating: 1,
      },
      rules: {
        logisticsRating: [
          {
            required: true,
            type: "number",
            message: "请选择物流服务评分",
            trigger: "onChange",
          },
        ],
        serviceRating: [
          {
            required: true,
            type: "number",
            message: "请选择服务态度评分",
            trigger: "onChange",
          },
        ],
      },
      loading: false,
      goodList: [],
      fileUrlObj: {},
      selectedData: [],
      networkName: "",
      index: 0,
      infoIndex: 0,
    };
  },
  methods: {
    goodclick(e, i) {
      this.infoIndex = i;
    },
    getData(item) {
      this.loading = true;
      orderGet(item.orderNo).then((res) => {
        this.loading = false;
        if (res.code == "1000" && res.data) {
          let fileCodeArr = [];
          this.networkName = res.data.networkName;
          this.formData.networkId = res.data.networkId;
          this.formData.orderNo = res.data.orderNo;
          res.data.orderGoodsVOS.forEach((val, index) => {
            this.index = index;
            val.formData = {
              goodsId: val.goodsId,
              orderNo: val.orderNo,
              commentId: "",
              specDetailId: val.specDetailId,
              descMatchRating: 1,
              commentContent: "",
              commentPicFileCodes: [],
            };

            if (
              val.goodsMainFileCode &&
              !this.fileUrlObj[val.goodsMainFileCode]
            ) {
              fileCodeArr.push(val.goodsMainFileCode);
              this.fileUrlObj[val.goodsMainFileCode] = "";
            }
          });

          if (fileCodeArr.length) {
            this.queryFileInfoData(fileCodeArr);
          }
          this.goodList = res.data.orderGoodsVOS;
        }
      });
    },

    // 保存
    handleSave() {
      let data = [];
      this.goodList.forEach((val, index) => {
        data.push(val.formData);
      });

      let formData = {
        goodsCommentSaveDTOList: data,
        networkCommentSaveDTO: this.formData,
      };
      this.loading = true;
      commentSave(formData)
        .then((res) => {
          this.loading = false;
          if (res.code === 1000) {
            this.$Notify({ type: "success", message: "评价成功！" });
            this.$emit("close");
            this.$emit("refresh");
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 附件上传
    uploadFileIds(arr) {
      this.goodList[this.infoIndex].formData.commentPicFileCodes = arr;
    },
    // 获取图片信息
    queryFileInfoData(fileCodeArr) {
      this.loading = true;
      queryFileList(fileCodeArr)
        .then((res) => {
          if (res.code === 1000 && res.data) {
            res.data.forEach((item) => {
              this.fileUrlObj[item.fileCode] = item.previewUrl;
              setTimeout(() => {
                this.fileUrlObj[item.fileCode] = item.url;
              }, 600);
            });
            this.$forceUpdate();
            this.loading = false;
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 重置表单
    resetForm() {
      setTimeout(() => {
        this.$refs.formData.resetValidation();
      });
      this.formData = {
        networkId: "",
        orderNo: "",
        logisticsRating: 1,
        serviceRating: 1,
      };
      this.index = 0;
      this.infoIndex = 0;
      setTimeout(() => {
        this.$refs.uploadRef.forEach((item) => {
          item.reset();
        });
      }, 300);
      this.loading = false;
    },
  },
};
</script>

<style scoped lang="less">
.bgBox {
  height: 100%;
}
h5 {
  font-size: 13px;
  text-indent: 1em;
  line-height: 35px;
  span {
    font-weight: normal;
    font-size: 12px;
  }
}
.topBox {
  height: calc(100% - 170px);
  overflow: auto;
}
.goodBox {
  height: 65px;
  background: #fff;
  display: flex;
  padding: 5px;
  border-radius: 6px;
  .imgBox {
    width: 80px;
    height: 100%;
  }
  img {
    width: 100%;
    height: 100%;
  }
  .delbox {
    flex: 2;
    padding-left: 8px;
    p {
      margin: 5px 0px;
    }
    .attr {
      font-size: 13px;
    }
  }
}

.imgBox .checked .icon {
  background: #e1251b;
}
</style>
